<template>
	<assNavbar title="消息" :messageTitleShow="false">
		<template #left>
			<view></view>
		</template>
		<template #center>
			<view class="ss-p-l-20">
				<view class="message-search-box ss-flex justify-start ss-p-x-20">
					<uni-icons type="search" size="20" color="rgb(192, 196, 204)"></uni-icons>
					<input v-model="keyword" class="ss-m-l-20 ss-m-r-20" type="text" placeholder="搜索内容"
						placeholder-style="font-size:30rpx;color:#ABABAB;" confirm-type="search" @confirm="confirm">
				</view>
			</view>
		</template>
		<template #right>
			<view class="right-fun ss-flex justify-center align-center ss-p-r-30">
				<view class="fun-item ss-m-r-30" @click="myFriend">
					<image class="fun-item-image"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250317/61016271cad44861d551608a9b14cbda.png">
					</image>
					<view class="unread" v-if="unreadCount > 0">{{unreadCount}}</view>
				</view>
				<popover :show="show" @close="close">
					<view class="fun-item" @click="open">
						<image class="fun-item-image"
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250317/065777fd14e11e6f9696eea44550d7c0.png">
						</image>
					</view>
				</popover>
			</view>
		</template>
	</assNavbar>
</template>

<script setup>
	import {
		ref,
		computed,
	} from 'vue';
	import {
		onPullDownRefresh,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import assNavbar from '@/im/components/ass-navbar.vue'
	import popover from '@/im/components/popover.vue'
	import $store from '@/im/store/im';


	onPullDownRefresh(() => {
		show.value = false
	})

	const keyword = ref('')

	const show = ref(false)

	const isReady = computed(() => $store().isReady)
	const unreadCount = computed(() => $store().unreadCount)

	const open = () => {
		if (!sheep.$store('user').isLogin) {
			return sheep.$helper.toast('请先登录')
		}
		show.value = true
	}

	const close = () => {
		show.value = false
	}

	const confirm = (e) => {
		if (!sheep.$store('user').isLogin) {
			return sheep.$helper.toast('请先登录')
		}
		sheep.$router.go('/im/pages/search', {
			keyword: keyword.value
		})
		setTimeout(() => {
			keyword.value = ''
		}, 1000)
	}

	const myFriend = () => {
		if (!sheep.$store('user').isLogin) {
			return sheep.$helper.toast('请先登录')
		}
		sheep.$router.go('/im/pages/myFriend')
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.message-image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin: 8rpx 0 0 10rpx;
	}

	.message-search-box {
		width: 532rpx;
		box-sizing: border-box;
		overflow: hidden;
		height: 72rpx;
		border-radius: 8rpx;
		background-color: rgb(245, 245, 245);


		input {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			color: #333;
		}
	}

	.right-fun {
		height: 72rpx;

		.fun-item {
			width: 40rpx;
			height: 40rpx;
			position: relative;

			.fun-item-image {
				width: 40rpx;
				height: 40rpx;
			}

			.unread {
				position: absolute;
				right: -20rpx;
				top: -5rpx;
				width: 34rpx;
				height: 24rpx;
				border-radius: 13rpx;
				background: #FF0000;
				font-size: 22rpx;
				font-weight: 350;
				line-height: 24rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>